<template>
	<section>
		<h3 class="h3-component">
			<span class="h3">热门话题</span>
		</h3>
		<ul class="ul">
			<li v-for="item in res_data" :key="item.topic_id"><router-link :to="`/topicList/${item.topic_id}?title=${item.topic_name}`">{{'#'+item.topic_name+'#'}}</router-link></li>
		</ul>
	</section>
</template>

<script>
import { topicGetlist } from '../api';
export default {
	data() {
		return {
			// 界面展示
			res_data: [],
			menu_id: null,
		}
	},
	watch: {
		'$route' (to, from) {
			// 对路由变化作出响应...
			this.getResData();
		}
	},
	methods: {
		getResData (){
			this.menu_id = this.$route.params.menu_id;
			let para = {
				menu_id: this.menu_id // 暂定
			}
			topicGetlist(para).then(res => {
				if(res.data){
					this.res_data = res.data
				}else{
					this.$message.warning(res.msg);
				}
			})
		},
	},
	mounted() {
		this.getResData();
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.ul li {
	margin: 15px 0;
}
</style>
